<template>
    <div>
        <div class="header-bar">
            <span class="icon icon-back"></span>
            <h3>登录</h3>
            <!-- <a href="javascript:;">注册</a> -->
            <router-link to="register">注册</router-link>
        </div>

        <form class="content">
            <div class="item">
                <label for="phone">手机号</label>
                <input v-model="phone" type="text" name="phone" />
            </div>
            <div class="item">
                <label for="psw">密码</label>
                <input v-model="psw" type="password" name="psw" />
            </div>
            <div class="foget">
                <a href="javascript:;">忘记密码</a>
            </div>
            <div>
                <input class="submit" @click="submitFn($event)" type="submit" value="登录">
            </div>
        </form>
    </div>
</template>

<script>
export default {
  name: "LoginPage",
  data() {
    return {
      phone: "",
      psw: "",
      testUrl: "/api/login"
    };
  },
  methods: {
    submitFn(e) {
      let _this = this;
      e = e || window.event;
      e.preventDefault();
      let regu = /^1[345678]\d{9}$/;
      let regp = /^[\w\.\@\#\$\%]{6,16}$/;
      if (!this.phone) {
        alert("手机号不能为空！");
        return false;
      } else if (!regu.test(this.phone)) {
        alert("手机号格式不正确！");
        return false;
      }
      if (!this.psw) {
        alert("密码不能为空！");
        return false;
      } else if (!regp.test(this.psw)) {
        alert("密码格式不正确，要求6-16位");
        return false;
      }

      this.axios
        .get(this.testUrl, {
          params: {
            phone: this.phone,
            password: this.psw
          }
        })
        .then(res => {
            console.log(res);
          alert(res.data.msg);
          if (res.data.status === 1) {
            _this.$router.push({ path: "/home" });
          }
        });
    }
  }
};
</script>

<style scoped lang="less">
@import "../style/loginAndRegister.less";
</style>